<template>

	<div>
		<div class="font16 fontBold pad10">废水在线监测预警处理</div>
		<el-table :data="tableData" border style="width: 100%">
			<el-table-column fixed prop="outletName" label="排口" width="150">
			</el-table-column>
			<el-table-column prop="noticeUserIdList" label="通知人员">
				<template scope="scope">
					<el-select v-model="scope.row.noticeUserIdList" multiple placeholder="通知人员" size="small"
						@change="saveOrUpdate(scope.row)" class="width100p">
						<el-option v-for="item in dataList3" :label="item.userName" :value="item.userId">
						</el-option>
					</el-select>
				</template>
			</el-table-column>
			<el-table-column prop="handleUserNames" label="处理人员">
				<template scope="scope">
					<el-select v-model="scope.row.handleUserIdList" multiple placeholder="处理人员" size="small"
						@change="saveOrUpdate(scope.row)" class="width100p">
						<el-option v-for="item in dataList3" :label="item.userName" :value="item.userId">
						</el-option>
					</el-select>
				</template>
			</el-table-column>
			<el-table-column prop="checkUserNames" label="复核人员">
				<template scope="scope">
					<el-select v-model="scope.row.checkUserIdList" multiple placeholder="复核人员" size="small"
						@change="saveOrUpdate(scope.row)" class="width100p">
						<el-option v-for="item in dataList3" :label="item.userName" :value="item.userId">
						</el-option>
					</el-select>
				</template>
			</el-table-column>
		</el-table>


		<div class="font16 fontBold pad10">废水问题工单处理</div>
		<el-form ref="form" label-width="80px">
			<el-form-item label="工单分配">
				<el-select v-model="data1.distributeUserIdList" multiple placeholder="分配人员" size="small"
					@change="saveOrUpdate2(data1)">
					<el-option v-for="item in dataList3" :label="item.userName" :value="item.userId">
					</el-option>
				</el-select>
			</el-form-item>
			
			<el-form-item label="复核人员">
				<el-select v-model="data1.checkUserIdList" multiple placeholder="复核人员" size="small"
					@change="saveOrUpdate2(data1)">
					<el-option v-for="item in dataList3" :label="item.userName" :value="item.userId">
					</el-option>
				</el-select>
			</el-form-item>
		</el-form>
	</div>

</template>

<script>
	import {
		Session,
		Local
	} from '@/utils/storage.js';
	let that
	export default {
		name: 'configScheduleType',
		data() {
			return {
				tableData: [],
				data1:{},
				dataList3: [],
				params: {
					ticketId: ''
				}
			}
		},
		created: function() {},
		mounted: function() {
			that = this
			that.params.ticketId = that.$store.state.token

			that.getPlanExecutorList()
		},

		methods: {
			saveOrUpdate2(){
				that.ajax({
					url: '/bbep/problemOrder/config/saveOrUpdate',
					contentType: 'application/json',
					data: JSON.stringify(that.data1),
					success: function(result) {
						that.$message.success("保存成功！")
					}
				})
			},
			
			saveOrUpdate(item) {
				that.ajax({
					url: '/onlineMonitor/config/saveOrUpdate',
					contentType: 'application/json',
					data: JSON.stringify(item),
					success: function(result) {
						that.$message.success("保存成功！")
					}
				})
			},

			getGasWarningConfigs() {
				that.ajax({
					url: '/onlineMonitor/config/getWaterWarningConfigs',
					contentType: 'application/json',
					data: JSON.stringify({}),
					success: function(result) {
						that.tableData = result.data
					}
				})
			},
			getConfigByScheduleType() {
				that.ajax({
					url: '/bbep/problemOrder/config/getConfigByScheduleType?ticketId=' + that.params
						.ticketId,
					contentType: 'application/x-www-form-urlencoded',
					data: {
						scheduleType: "WASTE_WATER"
					},
					success: function(result) {
						that.data1 = result.data
					}
				})
			},

			getPlanExecutorList() {
				that.ajax({
					url: '/documentEntSchedule/getPlanExecutorList',
					contentType: 'application/x-www-form-urlencoded',
					data: {},
					success: function(result) {
						that.dataList3 = result.data

						that.getConfigByScheduleType()
						that.getGasWarningConfigs()
					}
				})
			},

		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.el-col-20 {
		height: 60px;
		line-height: 60px;
		overflow-y: scroll;
	}
</style>